<template>
  <div class="home">
    <!-- 轮播 -->
     <h3 class="top"></h3>
    <div class="banner">
     
      <span></span>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in bannerlist" :key="index"
          ><img :src="item" alt="" style="width: 100%;height:100%"
        /></van-swipe-item>
      </van-swipe>
      <span></span>
    </div>
    <div class="warpper">
      <!-- 通知栏 -->
      <div class="my-notice">
        <van-notice-bar left-icon="volume-o" :scrollable="false">
          <van-swipe
            vertical
            class="notice-swipe"
            :autoplay="3000"
            :show-indicators="false"
          >
            <van-swipe-item>内容 1</van-swipe-item>
            <van-swipe-item>内容 2</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <!-- 倒计时 -->
      <!-- <van-count-down :time="time" /> -->
      <div class="popular">
        <div class="popular-nav">
          <span>超值爆款</span>
          <span>美好生活由此开始</span>
        </div>
        <div class="popular-content">
          <div class="cont">
            <div class="cont-left">
              <h3>今日推荐</h3>
              <p>店主诚意推</p>
              <p>荐 品质商品</p>
              <h4>
                GO !<span><img src="../assets/img/go.png" alt="" /></span>
              </h4>
            </div>
            <div class="cont-right">
              <img src="../assets/img/tuijian.jpg" alt="" />
            </div>
          </div>
          <div class="cont">
            <div class="cont-left">
              <h3>热门榜单</h3>
              <p>店主诚意推</p>
              <p>荐 品质商品</p>
              <h4 style="background: #ff8d41">
                GO !<span><img src="../assets/img/go.png" alt="" /></span>
              </h4>
            </div>
            <div class="cont-right">
              <img src="../assets/img/remen.jpg" alt="" />
            </div>
          </div>
          <div class="cont">
            <div class="cont-left">
              <h3>首发新品</h3>
              <p>新品上架等</p>
              <p>你来拿</p>
              <h4 style="background: #94e185">
                GO !<span><img src="../assets/img/go.png" alt="" /></span>
              </h4>
            </div>
            <div class="cont-right">
              <img src="../assets/img/xinpin.png" alt="" />
            </div>
          </div>
          <div class="cont">
            <div class="cont-left">
              <h3>促销单品</h3>
              <p>综合评选好</p>
              <p>产品</p>
              <h4 style="background: #ffc35b">
                GO !<span><img src="../assets/img/go.png" alt="" /></span>
              </h4>
            </div>
            <div class="cont-right">
              <img src="../assets/img/cuxiao.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 渲染 -->
      <subshop />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import ShopCard from "../components/ShopCard"; //每一个商品
import { getlist } from "../api/goods"; //导航栏列表数据
import subshop from "./SubNav.vue"; //子导航
import Head from "../components/Head.vue"; //头部
//粘性定位·
import Vue from "vue";
import { Sticky } from "vant";
Vue.use(Sticky);

export default {
  name: "Home",
  components: {
    ShopCard,
    subshop,
    Head,
  },
  data() {
    return {
      list: [],
      bannerlist: [
        "https://img.4g368.com/attach/2021/09/b57b3202109180053441052.jpg",
        "https://img.4g368.com/attach/2021/09/5ef04202109180055423922.jpg",
        "https://img.4g368.com/attach/2021/09/f61f0202109180058058726.jpg",
        "https://img.4g368.com/attach/2021/09/6a807202109180059565109.jpg",
        "https://img.4g368.com/attach/2021/09/1a5ad202109180101165187.jpg",
      ],
    };
  },
  created() {
    getlist().then((res) => {
      this.list = res.data.data;
      
    });
  },
};
</script>

<style lang="less" scope>
.home {
  background: #f5f5f5;
}

.top{
     width: 100%;
      background: #ff448f;
      height: 10px;
   }
.banner {
  display: flex;
  span {
    display: inline-block;
    width: 50px;
    height: 70px;
    background: #ff448f;
  }
  .my-swipe {
    // margin-top: 15px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
}
.warpper {
  padding: 0 10px;
  padding-bottom: 1px;
  background: #f5f5f5;
}
.my-grid {
  margin: 20px 0;
}
.my-notice {
  padding: 15px 0 0 5px;
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.popular {
  // width: 335px;
  background: #f2ecf2;
  height: 245px;

  .popular-nav {
    margin-top: 10px;
    height: 20px;
    padding: 10px;
    line-height: 20px;
    span:nth-of-type(1) {
      font-size: 16px;
      color: #fc3c3e;
    }
    span:nth-of-type(2) {
      font-size: 12px;
      background: linear-gradient(
        90deg,
        rgb(246, 44, 44) 0%,
        rgb(249, 110, 41) 100%
      );
      display: inline-block;
      width: 106px;
      margin-left: 10px;
      text-align: center;
      border-radius: 13px 0 13px 0;
    }
  }
  .popular-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .cont {
      border-radius: 10px;
      padding: 0 4px;
      width: 46%;
      height: 90px;
      background: #fff;
      display: flex;

      margin: 5px 0;
      .cont-left {
        width: 45%;
        padding: 2px;
        p {
          font-size: 12px;
          margin: 5px 2px;
        }
        h3 {
          font-size: 14px;
        }
        h4 {
          border-radius: 9px;
          background: linear-gradient(90deg, #4bc4ff, #207eff);
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          font-style: italic;
          margin-top: 5px;
          width: 56px;
          height: 18px;
          display: flex;
          justify-content: space-around;
          padding-top: 2px;
          span {
            display: inline-block;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            img {
              width: 100%;
            }
          }
        }
      }
      .cont-right {
        width: 45%;
        padding: 10px 5px;
        img {
          width: 70px;
        }
      }
    }
  }
}
</style>
